<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表页</title>
		<link rel="stylesheet" href="../css/list.css" />
		<link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />
		<script type = "text/javascript" src = "../js/require.js" defer async="true" data-main ="../js/list"></script>
	</head>
	<body>
		<!--top部分-->
		<section id = "jhmTopContainer" class = "jhm-top-container">
			<div id = "jhmTop" class = "jhm-top">
				<ul class = "top-nav">
					<div id="topLoginContainer" class = "top-login-container">
						<span id = "topLogin">
							<a href="#" class = "top-denglu">登录</a>
							<span class = "spacer">|</span>
							<a href="#" class = "top-zhuce">注册有礼</a>
						</span>	
					</div>
					<li class = "spacer">|</li>
					<li>
						<a href="#">个人中心</a>
					</li>
					<li class = "spacer">|</li>
					<li>
						<a href="#">我的订单</a>
					</li>
					<li class = "spacer">|</li>
					<li>
						<a href="#">手机金海马</a>
					</li>
				</ul>
			</div>
		</section>
		<!--logo部分-->
		<section id = "headContainer" class = "head-container">
			<div class = "head claerfix">
				<!--logo部分-->
				<div class="logo-container">
					<a href="detail.html" class = "left-logo">
						<img src="../img/indeximg/leftlogo.png"/>
					</a>
					<a href="#" class = "right-logo">
						<img src="../img/indeximg/rightlogo.png"/>
					</a>
				</div>
				<!--搜索栏部分-->
				<div class="search-container">
					<form action="" method="get" class = "search-form">
						<input type="text" name="search" id="search" class = "search-input" />
						<a href="javascript:;" class = "search-btn">
							<i class = "icon-search"></i>
						</a>
					</form>
				</div>
				<!--购物车部分-->
				<div class="cart">
					<i class = "icon-cart"></i>
					<span class = "cart-title">购物车</span>
				</div>
			</div>
		</section>
		<!--导航部分-->
		<section id = "navContainer" class = "nav-container">
			<div class="head-nav">
				<!--商品分类部分-->
				<dl class = "categories">
					<dt class = "cate-title">
						商品分类
						<i class = "icon-cate"></i>
					</dt>
					<dd></dd>
				</dl>
				<!--导航部分-->
				<div class="nav-container">
					<ul class = "nav-list">
						<li>
							<a href="#" class = "nav-item first">首页</a>
						</li>
						<li>
							<a href="#" class = "nav-item">住宅专场</a>
						</li>
						<li>
							<a href="#" class = "nav-item">办公专场</a>
						</li>
						<li>
							<a href="#" class = "nav-item">智能专场</a>
						</li>
						<li>
							<a href="#" class = "nav-item">体验区</a>
						</li>
					</ul>
					<!--下划线-->
					<div class="nav-line">
						<span class = "line"></span>
					</div>
				</div>
			</div>
		</section>
		<!--轮播图-->
		<section id = "slideShowContainer" class = "slide-show-container">
			<div class = "swiper-container">
				<div class = "swiper-wrapper">
					<div class = "swiper-slide"><img src="../img/indeximg/banner1.jpg"/></div>
					<div class = "swiper-slide"><img src="../img/indeximg/banner2.jpg"/></div>
					<div class = "swiper-slide"><img src="../img/indeximg/banner3.jpg"/></div>
				</div>
				<!--分页器-->
				<div class = "swiper-pagination"></div>
				<!--导航按钮-->
				<div class = "swiper-button-prev swiper-button-white"></div>
				<div class = "swiper-button-next swiper-button-white"></div>
			</div>
		</section>
		<section class = "page-wrap">
			<!--新品尝鲜部分-->
			<div class="new-product">
				<div class="new-title">
					<i class = "title-icon"></i>
					新品
					<span>尝鲜</span>
				</div>
				<ul class = "list">
					<li class = "new-item">
						<a class = "pro-link" href="#">
							<img src="../img/listimg/new1.jpg"/>
						</a>
						<h3 class = "pro-title">现代简约 米白+黑色 钢化玻璃 客厅两件套（茶几+地柜/电视柜）</h3>
						<p class = "pro-price">¥
							<span>2980</span>
						</p>
					</li>
					<li class = "new-item">
						<a class = "pro-link" href="#">
							<img src="../img/listimg/new2.jpg"/>
						</a>
						<h3 class = "pro-title">现代简约 米白+黑色 钢化玻璃 客厅两件套（茶几+地柜/电视柜）</h3>
						<p class = "pro-price">¥
							<span>2980</span>
						</p>
					</li>
					<li class = "new-item">
						<a class = "pro-link" href="#">
							<img src="../img/listimg/new3.jpg"/>
						</a>
						<h3 class = "pro-title">现代简约 米白+黑色 钢化玻璃 客厅两件套（茶几+地柜/电视柜）</h3>
						<p class = "pro-price">¥
							<span>2980</span>
						</p>
					</li>
					<li class = "new-item">
						<a class = "pro-link" href="#">
							<img src="../img/listimg/new4.jpg"/>
						</a>
						<h3 class = "pro-title">现代简约 米白+黑色 钢化玻璃 客厅两件套（茶几+地柜/电视柜）</h3>
						<p class = "pro-price">¥
							<span>2980</span>
						</p>
					</li>
				</ul>
			</div>
			<!--商品楼层开始-->
			<!--一层-->
			<div class="pro-floor">
				<div class="floor-title">
					<span>1F · </span>
					真皮沙发 
				</div>
				<ul class = "floor-list claerfix">
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor1-1.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor1-2.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor1-3.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor1-4.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
				</ul>
			</div>
			<!--二层-->
			<div class="pro-floor">
				<div class="floor-title">
					<span>2F · </span>
					客厅套装  
				</div>
				<ul class = "floor-list claerfix">
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-2-1.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-2-2.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-2-3.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-2-4.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
				</ul>
			</div>
			<!--三层-->
			<div class="pro-floor">
				<div class="floor-title">
					<span>3F · </span>
					布艺沙发 
				</div>
				<ul class = "floor-list claerfix">
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-3-1.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-3-2.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-3-3.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-3-4.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
				</ul>
			</div>
			<!--四层-->
			<div class="pro-floor">
				<div class="floor-title">
					<span>4F · </span>
					酒柜/饰品柜(架)/间厅柜  
				</div>
				<ul class = "floor-list claerfix">
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-4-1.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-4-2.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-4-3.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
					<li class = "list-item">
						<a class = "floor-link" href="#">
							<h3 class = "pro-title">现代简约 棕色 真皮 沙发组合（1+2+3）</h3>
							<img src="../img/listimg/floor-4-4.jpg"/>
						</a>
						<p class = "pro-price">
							¥
							<span>16850</span>
						</p>
					</li>
				</ul>
			</div>
		</section>
		<!--底部通用部分-->
		<footer class = "common-footer-container">
			<ul class = "advantage">
				<li class = "item">
					<a href="#">
						<i class = "icon-26year"></i>
						<span>26年匠心打造</span>
					</a>
				</li>
				<li class = "item">
					<a href="#">
						<i class = "icon-3a"></i>
						<span>AAA诚信企业</span>
					</a>
				</li>
				<li class = "item">
					<a href="#">
						<i class = "icon-7day"></i>
						<span>7天无理由退换货</span>
					</a>
				</li>
				<li class = "item">
					<a href="#">
						<i class = "icon-much"></i>
						<span>多仓直发极速达</span>
					</a>
				</li>
			</ul>
			<div class="friendship">
				<div class="link">
					<a class = "item" href="#">关于我们</a>
					<i>|</i>
					<a class = "item" href="#">帮助中心</a>
				</div>
				<p class = "copyright">©COPYRIGHT 2017 KINHOM.COM ALL RIGHTS RESERVED. 粤ICP备12018989号</p>
			</div>
		</footer>
	</body>
</html>
